import { useState, useEffect } from 'react'
import { Typography, Row, Input, Col, Button } from 'antd'
import Link from 'next/link'

import PC from '@/components/reposive/pc'
import IsMd from '@/components/reposive/is-md'

import SizeShower from '../../components/screen-size/index'

const { Title } = Typography

const item = (info, size) => (
  <>
    <Col span={size} key={info}>
      <Title level={5}>{info}</Title>
      <Input />
    </Col>
  </>
)

const ShowFilterContent = () => {
  const listInfo = ['Tags', 'Color', 'Timeframe', 'Made With', 'Downloads']

  const [list, setList] = useState([])
  const [listMd, setListMd] = useState([])

  useEffect(() => {
    const temp = []
    const tempMd = []

    for (const e of listInfo) {
      temp.push(item(e, 4))
      tempMd.push(item(e, 24))
    }
    setList(temp)
    setListMd(tempMd)
  }, [])

  return (
    <>
      {/* <SizeShower /> */}
      <PC>
        <Row
          justify="center"
          align="middle"
          style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-around',
          }}
        >
          {list}
        </Row>
      </PC>
      <IsMd>
        <Row>{listMd}</Row>
      </IsMd>
    </>
  )
}
export default ShowFilterContent
